<template>
	<view class="big_box">
		<u-navbar :title="tabTitle" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="list">
			<view class="list_item" v-for="item in listData" :key="item.id">
				<view class="left">
					<image :src="item.image" mode=""></image>
					<view class="sub_text">
						<view class="title">
							{{ item.name }}
						</view>
						<view class="desc">
							{{ item.descript }}
						</view>
					</view>
				</view>
				<u-button type="primary" class="custom-style" shape="circle" :plain="true"
					@click="go_add(item)">入群</u-button>
			</view>
		</view>
		<u-empty v-if="listData.length === 0" mode="data" >
		</u-empty>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import api from '@/api/index.js'
	export default {
		data() {
			return {
				tabTitle: '',
				listData: [],
				city_id: ''
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		onLoad(option) {
			console.log(JSON.parse(option.data), 'option');
			let value = JSON.parse(option.data)
			this.tabTitle = value.name
			this.city_id = value.id
			this.getGroupList();
		},
		methods: {
			//获取群
			getGroupList() {
				api.getGroupList({
					cid: this.city_id
				}).then(res => {
					if (res.response.statusCode == 200) {
						console.log(res.data.data, '22222');
						this.listData = res.data.data
					}
				}).catch(err => {
					console.error(err)
				})
			},
			rightClick() {
				console.log('rightClick');
			},
			//加群
			go_add(item) {
				uni.navigateTo({
					url: '/pages/index/pay?data=' + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex-center-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	@mixin flex-center-column {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.big_box {
		padding: 1rem;

		.list {
			display: flex;
			flex-direction: column;
			width: 100%;
			border-top: 1px solid #f1f1f1;
			margin-top: 2rem;

			.list_item {
				@include flex-center-between;
				margin: .5rem 0;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 3rem;
						height: 3rem;
						border-radius: .8rem;
					}

					.title {
						font-size: 1rem;
						font-weight: 600;
						color: #191919;
					}

					.desc {
						font-size: .8rem;
						color: #7e7e7e;
					}
				}

				.custom-style {
					width: 4rem;
					height: 1.5rem;
					line-height: 1.5rem;
					font-size: .8rem;
					margin: 0;
				}
			}
		}
	}
</style>